<template>
<div style="width:800px;" class="rounded-lg p-2 bg-white">
  <div  class="flex flex-col justify-center" id="custom-modal-container">
  <div v-if="!visibleD" class="p-2">
  <a-list item-layout="vertical" size="large"  :data-source="listData">
    
    <template #renderItem="{ item }">
      <a-list-item key="item.title"  @click="showxw(item)" class="cursor-pointer">
         
         <CaretRightOutlined /> {{item.title}}
      </a-list-item>
    </template>
  </a-list>
  </div>
 
    <div v-if="visibleD" class="w-full h-full">
          <HelpDetail :detailXinwen="newsobj" @closeDetail="closeDetail"/>
      </div>
  
   </div>
  
  </div>
</template>
<script lang="ts">
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { ref,defineComponent,onMounted } from 'vue';

import { List,ListItem } from 'ant-design-vue';
import { newslistapi } from '/@/api/dp/dpbaseapi';
import HelpDetail from '/@/views/dp/xinwen/helpfrontdetail.vue';




export default defineComponent({
  components: {
   CaretRightOutlined,
   AList:List,
   AListItem:ListItem
  },
})
</script>

<script lang="ts" setup>  
    const listData=ref([]);
    const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 20,
    };
    const visibleD = ref<boolean>(false);
    const newsobj=ref({});

    onMounted(()=>{
      getNewslist();
    });
    defineExpose({getNewslist});
    async function getNewslist(){
      console.log(pagination);
      const res=  await newslistapi({xwtype:'3'});
      console.log(res.list);
      listData.value=res.list;
      console.log(listData);
    }

    function showxw(obj){
       
      visibleD.value=true;
      newsobj.value=obj;
    }

    function closeDetail(){
      visibleD.value=false;
    }
     const getImg = (kcimg) => {
        let img = "http://localhost:8980/js"+kcimg;
        return img
     
     }

      const onClose = () => {
      visibleD.value = false;
    };
</script>

<style scoped>
.text-ellipsis {
  height: 2.6em; /* 设置高度为固定的行高的两倍 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制在两行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 添加省略号 */
}
</style>